<template>
    <div class="hisTags">
        <div class="funTag">
            <el-icon @click="back">
                <ArrowLeft />
            </el-icon>
            <el-divider direction="vertical"></el-divider>
            <el-icon @click="router.go(0)">
                <RefreshRight />
            </el-icon>
            <el-divider direction="vertical"></el-divider>
            <el-icon @click="router.push('/home')">
                <HomeFilled />
            </el-icon>
        </div>
        <el-scrollbar ref="scrollbarRef">
            <div class="scrollbar-flex-content">
                <div class="hisTag" :class="{ 'activeTag': tag === tagStore.currentTag }" v-for="tag in tagStore.tags"
                    @contextmenu.prevent.stop="openFun(tag, $event)">
                    <span @click="toMenu(tag)">{{ tag.title }}</span>
                    <el-icon :size="12" @click="removeTag(tag)">
                        <Close />
                    </el-icon>
                </div>
            </div>
        </el-scrollbar>
    </div>
    <div v-if="funVisible" class="fun-div" :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
        v-clickOutSide="clickOutside">
        <p :class="{ 'selectP': pIndex === 1 }" @click="closeTab(1)" @mousemove="changePIndex(1)"
            @mouseout="changePIndex(-1)">关闭所有页</p>
        <p :class="{ 'selectP': pIndex === 2 }" @click="closeTab(2)" @mousemove="changePIndex(2)"
            @mouseout="changePIndex(-1)">关闭其他页</p>
        <p :class="{ 'selectP': pIndex === 3 }" @click="closeTab(3)" @mousemove="changePIndex(3)"
            @mouseout="changePIndex(-1)">关闭当前页</p>
    </div>
</template>

<script setup name="hisTags">
import { ref, onMounted, nextTick } from "vue";
import { useTagStore } from "@/store/tagStore";
import { useRouter } from 'vue-router'
import VueEvent from '@/utils/event.js'

const router = useRouter()
const tagStore = useTagStore()
const funVisible = ref(false)
const contextMenuTop = ref(0)
const contextMenuLeft = ref(0)
const pIndex = ref(-1)
const tag = ref()
const scrollbarRef = ref()
const back = () => {
    const backPath = router.options.history.state.back
    const backTag = tagStore.tags.filter(item => item.path === backPath)
    if (backTag.length === 1) {
        tagStore.currentTag = backTag[0]
    }
    router.back()

}
const removeTag = (tag) => {
    tagStore.removeTag(tag)
    const nextTag = tagStore.tags[tagStore.tags.length - 1]
    if (nextTag) {
        router.push(nextTag.path)
        tagStore.currentTag = nextTag
    }else{
        router.push('/home')
    }
}
const toMenu = (tag) => {
    router.push(tag.path)
    tagStore.currentTag = tag
    scrollTag(tag)
}
const scrollTag = (tag) => {
    nextTick(() => {
        // 获取滚动容器的 DOM 元素
        const container = scrollbarRef.value.wrapRef
        //计算tag所在滚动条位置宽度
        const tags = tagStore.tags
        const index = tags.indexOf(tag)
        const tagWith = (index + 1) * 100
        //滑动滚动条
        scrollbarRef.value.scrollTo({
            left: tagWith - 200,
            behavior: 'smooth' // 平滑滚动
        })
    })
}
const clickOutside = () => {
    funVisible.value = false
}
const closeTab = (type) => {
    if (type === 1) {
        tagStore.removeAll()
        router.push('/home')
    } else if (type === 2) {
        tagStore.removeOther(tag.value)
        router.push(tag.value.path)
        tagStore.currentTag = tag.value
    } else if (type === 3) {
        tagStore.removeTag(tag.value)
        const nextTag = tagStore.tags[tagStore.tags.length - 1]
        router.push(nextTag.path)
        tagStore.currentTag = nextTag
        scrollTag(nextTag)
    }
    funVisible.value = false
}
const changePIndex = (index) => {
    pIndex.value = index
}
const openFun = (selectTag, event) => {
    tag.value = selectTag
    funVisible.value = true
    contextMenuTop.value = event.pageY;
    contextMenuLeft.value = event.pageX;

}
onMounted(() => {
    VueEvent.on("addTag", (tag) => {
        scrollTag(tag)
    })
})
</script>
<style scoped lang="less">
.hisTags {
    height: 25px;
    margin-bottom: 10px;
    display: flex;

    .funTag {
        min-width: 120px;
        margin-right: 10px;
        background-color: #ffffff;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .scrollbar-flex-content {
        display: flex;

        .hisTag {
            width: 100px;
            height: 25px;
            font-size: 14px;
            background-color: #ffffff;
            border-radius: 5px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            gap: 10%;
            flex-shrink: 0;
        }

        .activeTag {
            color: var(--theme-color);
        }
    }
}

.hisTags::-webkit-scrollbar {
    display: none;
}

.fun-div {
    position: absolute;
    z-index: 999;
    height: 100px;
    width: 100px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);

    p {
        color: #8c8c8c;
        cursor: default;
        text-align: center;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
    }

    .selectP {
        color: silver;
    }
}
</style>